<template lang="pug">
  .modal-dialog.modal__overwrite(role='document', v-show="show")
    .modal-content
      .modal-header
        h5.modal-title 本地题目
        button.close(type='button', data-dismiss='modal', aria-label='Close')
          span(aria-hidden='true', @click="close") ×
      .modal-body
        form.form.form-inline.test__form
          .form-group
            label 考点选择
            select.form-control
              option 一元二次方程
          .form-group
            label 题型
            select.form-control
              option 客观题
          .form-group
            label 分值
            input.form-control(type="text", value="5")
          .form-group
            label 难度
            input.form-control(type="text", value="5")
        #subject
        .answer__list
          span 答案
          ul
            li
              label
                input(type="checkbox")
                | A
            li
              label
                input(type="checkbox")
                | B
            li
              label
                input(type="checkbox")
                | C
            li
              label
                input(type="checkbox")
                | D
        #answer
        .test__ft
          button.btn.btn-outline-primary.btn--submit 
            i.fa.fa-check
            | 确定加入
          button.btn.btn-outline-primary 
            i.fa.fa-download
            | 保存并创建
</template>
<style lang="scss" scoped>
.test__form {
  margin-bottom: 20px;
  .form-group {
    margin-right: 30px;
  }
  label {
    margin-right: 5px;
  }
  select,
  input {
    width: 120px;
  }
}
.answer__list {
  margin: 20px 0;
  @include clearfix();
  span {
    float: left;
  }
  ul {
    @include clearfix();
    margin-left: 40px;
  }
  li {
    float: left;
    margin-right: 10px;
  }
  label {
    margin-bottom: 0;
  }
  input {
    margin-left: 3px;
    vertical-align: 1px;
    margin-right: 3px;
  }
}
.test__ft {
  text-align: center;
}
.btn--submit {
  margin-right: 50px;
}
</style>

<script>
import { mapState } from 'vuex'
export default {
  data () {
    return {
      loaded: false
    }
  },
  watch: {
    show (val) {
      if (val && !this.loaded) {
        this.loaded = true
        $('#subject').summernote({
          placeholder: 'Hello bootstrap 4',
          tabsize: 2,
          height: 100
        })
        $('#answer').summernote({
          placeholder: 'Hello bootstrap 4',
          tabsize: 2,
          height: 100
        })
      }
    }
  },
  computed: mapState({
    show: state => state.modal.localTest
  }),
  methods: {
    close () {
      this.$store.commit('hide', 'localTest')
    }
  }
}
</script>
